<template>
	<view class="recruitment-container">
		
		<!-- 图片轮播 -->
		<view class="wrap">
			<u-swiper :list="swiperlist" height="350" border-radius="16" @click="onSwiperClick"></u-swiper>
		</view>
		<!-- 图文导航 -->
		<view class="dial-nav">
			<dial-nav marginTopLine='22rpx' imgSize='84rpx' :list="dialNavList"></dial-nav>
		</view>

		<!-- 顶部标签栏 -->
		<u-tabs :list="tabs" :current="currentTab" @change="tabChange" active-color="#2979ff" inactive-color="#666"
			bar-width="120" :bold="true" :font-size="32" bg-color="#D4F0F1"></u-tabs>

		<!-- 内容区域 -->
		<view class="content">
			<!-- 招聘列表 -->
			<view v-if="jobList.length > 0">
				<view v-for="(job, index) in filteredJobs" :key="job.gwi_flowid" class="job-card">
					<view class="job-header">
						<text class="job-title">{{ job.gwi_name }}</text>
						<text class="job-salary">{{ job.gwi_offer }}</text>
					</view>

					<view class="job-info">
						<text class="info-item">工作地：{{ job.gwi_workaddr }}</text>
						<text class="info-item">|</text>
						<text class="info-item">{{ job.gwi_exptype }}经验</text>
					</view>

					<view class="job-info">
						<text>创建时间：{{ job.create_time }}</text>
					</view>
					<view class="job-meta">
						<text class="status" :class="'status-' + job.status">状态：{{ job.gwi_publishstate == 0 ? "未发布" : "已发布" }}-{{job.gwi_shenhestate == 0 ? "审核中" : "审核通过"}}</text>
					</view>

					<view class="job-actions">
						<template v-if="job.gwi_publishstate === 0 ">
							<u-button type="default" size="medium" shape="circle" plain @click="deleteJob(job.gwi_flowid)" :custom-style="customStyleObject">
								删除
							</u-button>
							<u-button type="default"  size="medium" shape="circle" plain @click="publishJob(job.gwi_flowid)" :custom-style="customStyleObject">
								发布
							</u-button>
							<u-button type="default" size="medium" shape="circle" plain @click="editJob(job.gwi_flowid)" :custom-style="customStyleObject">
								编辑
							</u-button>
						</template>

						<template v-else>
							<u-button type="default"  size="medium" shape="circle" plain @click="unpublishJob(job.gwi_flowid)"
								:custom-style="customStyleObject">
								下架
							</u-button>
							<u-button type="default" size="medium" shape="circle" plain @click="editJob(job.gwi_flowid)" :custom-style="customStyleObject">
								编辑
							</u-button>
						</template>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="您还未发布招聘信息"
				margin-top="100"></u-empty>
		</view>

		<!-- 发布按钮 -->
		<!-- 		<view class="publish-btn">
			<u-button type="primary" shape="circle" @click="createJob">
				发布新岗位
			</u-button>
		</view> -->
		<!-- 引入客服悬浮按钮 -->
		<float-customer-service />
	</view>
</template>

<script>
	import FloatCustomerService from '@/components/FloatCustomerService.vue'
	import DialNav from '@/components/nav/dial-nav.vue';
	import util from '@/utils/util.js'
	export default {
		components: {
			DialNav,
			FloatCustomerService
		},
		data() {
			return {
				// 轮播
				swiperlist: [{
						image: "/static/banner/banner1.png",
						title: "昨夜星辰昨夜风，画楼西畔桂堂东",
					},
					{
						image: "/static/banner/banner2.png",
						title: "身无彩凤双飞翼，心有灵犀一点通",
					}
				],
				currentTab: 1, // 默认选中"我的招聘"
				// 徽标
				// count: 7,
				// type: 'error',
				// isDot: false,
				// offset: [20, 50],
				// size: 'default',
				// isCenter: false,
				// 顶部导航
				dialNavList: [{
						img: require('static/nav/icon_fabugangwei.png'),
						name: '发布岗位',
						url: 'pages/Institution/invite/post-job',
						params: {}
					},
					{
						img: require('static/nav/icon_rencaiku.png'),
						name: '人才库',
						url: 'pages/Institution/invite/invite-talent',
						params: {}
					},
					{
						img: require('static/nav/icon_yitou.png'),
						name: '已收简历',
						url: 'pages/Institution/invite/resume',
						params: {}
					},
					{
						img: require('static/nav/icon_mianshi.png'),
						name: '面试记录',
						url: 'pages/Institution/invite/invite-record',
						params: {}
					},
				],
				// tabs页
				currentTab: 0,
				tabs: [{
						name: '我的招聘'
					},
					{
						name: '已发布'
					},
					{
						name: '未发布'
					}
				],
				jobList: [{
						id: 1,
						title: '康养师',
						salary: '6K~10K',
						location: '福州-鼓楼区',
						experience: '1-3年',
						createTime: '2025-05-23',
						gwi_curstate: 1,
						statusText: '未发布'
					},
					{
						id: 2,
						title: '康养师',
						salary: '6K~10K',
						location: '福州-鼓楼区',
						experience: '1-3年',
						createTime: '2025-05-23',
						gwi_curstate: 2,
						statusText: '已发布'
					}
				],
				// 按钮组中的样式写法
				customStyleObject: {
					marginRight: '10rpx',
					color:'#03B8CD'
					// margin-right: 20rpx;

				},
			}
		},
		computed: {
			// 按条件过滤是否发布的条件
			filteredJobs() {
				// "gwi_publishstate": 1待审核，2审核通过；  "gwi_curstate": 0 草稿  1正式发布 
				if (this.currentTab === 1) {
					return this.jobList.filter(job => job.gwi_publishstate === 1);
				} else if (this.currentTab === 2) {
					return this.jobList.filter(job => job.gwi_publishstate === 0);
				}
				return this.jobList;
			}
		},
		onShow() {
			// 加载顶部banner
			this.selectBanner()
			// 查询岗位
			this.getganwei()

		},
		methods: {
			// 加载Banner
			selectBanner() {
				// 加载从业者端-在线学习页
				this.$u.api.querybannerlist().then(res =>{
					console.log('Banner:', res)
					let baseinfo = res.data.base_info
					let filterBanner = baseinfo.filter(item => item.bbn_wz == '企业机构端-人才招聘页').sort((a, b) => a.bbn_px - b.bbn_px);
					this.swiperlist = []
					
					for(let i = 0; i< filterBanner.length; i++) {
						this.swiperlist.push({
							image: filterBanner[i].bbn_imguri[0].url,
							link: filterBanner[i].bbn_desc,
							title: filterBanner[i].bbn_wz,
						})
					}
					console.log('filterBanner:', this.swiperlist)
				})
			},
			
			// 跳转Banner
			onSwiperClick(index) {
				console.log('index:', index)
				const item = this.swiperlist[index];
				if (item && item.link) {
					console.log('index-1:', item.link)
					// this.navigateToPage(item.link);
					const linkpath = item.link.match(/"([^"]+)"/)[1];
					uni.navigateTo({
						url: linkpath
					});
				}
			},		
			
			
			// 查询岗位
			getganwei() {
				this.$u.api.querygw({
					gwiflowid: "",
					usercode: uni.getStorageSync('usercode')				
				}).then(res => {
					console.log('查询岗位：',res)
					this.jobList = res.data.base_info
					for(var i=0; i < this.jobList.length; i++) {
						let createTime = util.formatDate(this.jobList[i].create_time)
				  	// console.log('查询岗位-time：',createTime)
						this.jobList[i].create_time = createTime
					}
				})
			},
			tabChange(index) {
				this.currentTab = index;
			},
			createJob() {
				uni.navigateTo({
					url: '/pages/recruitment/create'
				});
			},
			editJob(id) {
				uni.navigateTo({
					url: `/pages/recruitment/edit?id=${id}`
				});
			},
			deleteJob(id) {
				uni.showModal({
					title: '提示',
					content: '确定删除该招聘信息吗？',
					success: (res) => {
						if (res.confirm) {
							this.jobList = this.jobList.filter(job => job.id !== id);
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			},
			publishJob(flowid) {
				const publicJob = this.jobList.find(job => job.gwi_flowid === flowid);
				this.$u.api.savegw({
					"gwiflowid":flowid,
					"usercode": uni.getStorageSync('usercode'),
					"gwiname": publicJob.gwi_name,
					"gwitype": publicJob.gwi_type,
					"gwioffer": publicJob.gwi_offer,
					"gwiexptype": publicJob.gwi_exptype,
					"gwiworkaddr": publicJob.gwi_workaddr,
					"gwiaddr": publicJob.gwi_addr,
					"gwigangweiduty": publicJob.gwi_gangweiduty,
					"gwirenzhiduty": publicJob.gwi_renzhiduty		
				}).then(res => {
					console.log('岗位发布：',res)
					this.getganwei()
					
				})
				
				// if (job) {
				// 	job.status = 'published';
				// 	job.statusText = '已发布';
				// 	uni.showToast({
				// 		title: '发布成功',
				// 		icon: 'success'
				// 	});
				// }
			},
			// 下架
			unpublishJob(flowid) {
				this.$u.api.updategwdown({
					"gwiflowid": flowid					
				}).then(res => {
					console.log('下架：',res)
					
				})
				// const job = this.jobList.find(job => job.id === id);
				// if (job) {
				// 	job.status = 'draft';
				// 	job.statusText = '未发布';
				// 	uni.showToast({
				// 		title: '已下架',
				// 		icon: 'success'
				// 	});
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recruitment-container {
		// height: 100vh;
		display: flex;
		flex-direction: column;
		// background-color: #F1F7F7;
		background: linear-gradient(to bottom, #CAEDEE, #F1F7F7);

		.wrap {
			margin: 0 10px;
			// padding: 10rpx;
			border-radius: 20rpx;
		}

		.dial-nav {
			margin: 10px;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			background-color: #fff;		
		}

		/deep/ .u-tabs {
			background-color: #F1F7F7;
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
			margin: 0 10px;
			border-radius: 12rpx;
		}

		.content {
			flex: 1;
			overflow-y: auto;
			margin: 10px;
			// padding: 10rpx;

			.job-card {
				background-color: #FFFFFF ;
				border-radius: 12rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;

				.job-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;

					.job-title {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
					}

					.job-salary {
						font-size: 28rpx;
						// color: #ff6a00;
						font-weight: bold;
					}
				}

				.job-info {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					font-size: 26rpx;
					color: #666;

					.info-item {
						margin-right: 15rpx;

						&:last-child {
							margin-right: 0;
						}
					}
				}

				.job-meta {
					display: flex;
					justify-content: space-between;
					font-size: 26rpx;
					color: #666;
					margin-bottom: 30rpx;
					border-bottom: 1px solid #dfdfdf;
					padding-bottom: 15rpx;

					.status {
						// font-weight: bold;

						&.status-published {
							color: #19be6b;
						}

						&.status-draft {
							color: #ff9900;
						}
					}
				}

				.job-actions {
					display: flex;
					justify-content: flex-end;
				}
			}
		}

		.publish-btn {
			padding: 20rpx;
			background-color: #F1F7F7;
			border-top: 1rpx solid #eee;
		}
	}
</style>